<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>

    // var ee = document.getElementById('ee');
    // var js = document.getElementById('js');
    // var list = document.getElementById('list');
    // //要包含的节点.insertBefore(newNode,targetNode)
    // list.insertBefore(js,ee);

    var js = document.getElementById('js'); //已经存在的节点
    var list = document.getElementById('list');
    list.appendChild(js);   //追加到后面
    //通过JS 创建一个新的节点
    var newP = document.createElement('p')  //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'hello kuangshen';
    list.appendChild(newP)
    //创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    //可以创建一个Style标签
    var myStyle = document.createElement('style');  // 创建了一个空的style标签
    myScript.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';  //设置标签内容
    document.getElementsByTagName('head')[0].appendChild(myStyle)



</script>

</body>
</html>